<template>
    <div class="header">
       <header>
		   <ul>
			   <li>{{can.home}}</li>
			  <li v-show="can.name">/  {{can.name}}</li>
			  <!-- <li> {{url}}</li> -->
			  <li v-show="can.title" style="color:gray">/  {{can.title}}</li>
			  
		   </ul>
		  <div class="box1" @mouseenter="zhuang" @mouseleave="chu">
                <el-avatar :src="url?url:img_url" ></el-avatar>
				<transition name="fu">
				    <div v-show="!bool">
						<p @click="home">首页</p>
						<p @click="login">退出</p>
					</div>
				</transition>
				
		  </div>
		 
	   </header>
		
    </div>
</template>

<script>

	// import {baseImgPath} from '@/config/env'
	
    import {mapState} from 'vuex'
    export default {
		props:["url"],
    	data(){
    		return {
    			// baseImgPath,
				img_url:"",
				bool:true
    		}
    	},
		// inject:['reload'],
		created(){
			// console.log(this.userInfo)
             this.img_url=`http://127.0.0.1:8888/imgs/user/${this.userInfo.user_img}`
		},
		updated(){
        //    console.log("dskfs")
		   
		},
		computed:{
           ...mapState(['can','userInfo'])

		},
    	methods:{
			zhuang(e){
				console.log("sdkf")
				this.bool=false
			},
			chu(){
				this.bool=true
			},
			home(){
				this.$router.push("/home")
			},
			login(){
				this.$router.push("/")
			}
		}
    }
</script>

<style scoped lang="less">
.box1{
	position:relative;
}
.box1 div{
	position: absolute;
	top: 45px;
	left: -50px;
	width: 100px;
	background-color: white;
	box-shadow: black 0 0 5px;
	z-index: 10000;
}
.box1 div>p{
	padding: 3px 6px;
	&:hover{
		background-color: rgb(241, 233, 233);
	}
}
	header{
		width: 82.5vw;
		height: 40px;
		line-height: 40px;
		padding: .7vw 1.5vw;
		background-color: #eff2f7;
		display: flex;
		position: relative;

		justify-content: space-between;
	}
	// header>img{
	// 	width: 45px;
	// 	height: 45px;
	// 	border-radius: 50%;
	// 	position: absolute;
	// 	right: 30px;
	// 	top: 10px;
	// }
	span img{
		width: 100%;
		height: 100%;
	}
	ul{
		display: flex;
		margin-left: 20px;
	}
	li{
		margin-right: 5px;
	}
</style>
